<!--
 * @Author: lihaonan
 * @Date: 2024-09-25 16:56:28
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-11-16 20:27:20
 * @Description: 请填写简介
-->
<template>
  <view class="content">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#8a8a8a" size="42" :bold="true"></u-icon>
    </view>
    <view class="content_top">
      <u-tabs
        :list="tabList"
        @click="tabClick"
        lineColor="#FD6585"
        lineHeight="4"
        :activeStyle="{
          color: '#FD6585',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#333',
          fontWeight: 'bold',
        }"
        itemStyle="  height: 40px; width:70px; margin-bottom:5px; "
      ></u-tabs>
    </view>
    <view class="text-area">
      <view
        class="imageBox"
        v-for="(item, index) in actData"
        :key="index"
        @click="imageClick(item)"
      >
        <view class="img">
          <image :src="item.cover" style="width: 100%; height: 100%"></image>
        </view>
        <view class="text_right">
          <view class="title">{{ item.actName }}</view>
          <view class="text1">{{ item.actLocation }}</view>
          <view class="text2">{{ item.actTime + "~" + item.endTime }}</view>
          <view class="text3">
            <text>己报名人数:</text>
            {{ item.signNumber }}/{{ item.numberLimit }}
          </view>
          <view class="text4">
            <text class="jiage">￥{{ item.price }}</text> 起
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getActList } from "@/api/swiper";
const list = ref();
const actData = ref();
const tabList = ref([
  { name: "近期活动" },
  { name: "工作坊" },
  { name: "同游" },
]);
// 获取列表数据
const queryList = async () => {
  const { data, code } = await getActList({ pageSize: "10", pageNum: "1" });
  if (code !== 200) return;
  list.value = data.records;
  actData.value = [];
  list.value.map(
    (item: {
      cover: string;
      actTime: string;
      endTime: string;
      category: string;
    }) => {
      item.cover = "https://hunlianjiaxiao.cn/img/love/" + item.cover;
      item.actTime = item.actTime.substring(5, 16);
      item.endTime = item.endTime.substring(5, 16);
      if (item.category === "近期活动") {
        actData.value.push(item);
      }
    }
  );
};
// tabs点击
const tabClick = (item: { name: string }) => {
  actData.value = [];
  list.value.map((i: { category: string }) => {
    if (i.category === item.name) {
      actData.value.push(i);
    }
  });
};
// 返回上一页
const left = () => {
  uni.navigateBack();
};
// 点击图片跳转
const imageClick = (item: string) => {
  uni.navigateTo({
    url:
      `/pages/swiper/eventDetails?data=` +
      encodeURIComponent(JSON.stringify(item)),
  });
};
onLoad((option) => {
  if (!option) return;
  // list.value = JSON.parse(decodeURIComponent(option.data));\
  queryList();
});
</script>
<style>
.u-input__content {
  margin-top: 8rpx;
  padding: 0 20rpx;
}
</style>
<style lang="scss">
.content {
  background-color: rgb(245, 245, 245);
}

.u-nav-slot {
  position: absolute;
  top: 115rpx;
  left: 30rpx;
  z-index: 100;
  z-index: 100;
}

.text-area {
  .imageBox {
    margin: 20rpx auto;
    height: 200rpx;
    width: 680rpx;
    overflow: hidden;
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .img {
      height: 200rpx;
      width: 180rpx;
    }

    .text_right {
      margin-left: 40rpx;
      position: relative;

      .title {
        font-weight: 700;
      }

      .text1 {
        font-size: 14px;
        margin-top: 10rpx;
        color: #8a8a8a;
      }

      .text2 {
        font-size: 14px;
        color: #8a8a8a;
      }

      .text3 {
        font-size: 14px;
        color: #eccda4;
      }

      .text4 {
        font-size: 14px;
        margin-top: 10rpx;
        position: absolute;
        right: -130rpx;

        .jiage {
          font-size: 16px;
          color: #fd6585;
          font-weight: 600;
        }
      }
    }
  }
}

.content_top {
  background-image: linear-gradient(to bottom, #eb97b0, #faf5f6);
  height: 100rpx;
  padding-top: 180rpx;
}
</style>
